<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分析生命周期</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root" :x='n'>
			<h2 v-text="n"></h2>
			<h2>当前的n值是:{{n}}</h2>
			<button type="button" @click="add">点击n+1</button>
			<button type="button" @click="xiao">点击销毁VM</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				// template:`
				// <div>
				// 	<h2>当前的n值是:{{n}}</h2>
				// 	<button type="button" @click="add">点击n+1</button>
				// </div>
				// `,
				data:{
					n:1,
				},
				methods:{
					add(){
						console.log('add');
						this.n++;
					},
					xiao(){
						console.log('bye');
						// vm.$destroy() 完全销毁一个实例，清理它与其它实例的连接
						this.$destroy();
					}
				},
				watch:{
					n(){
						console.log('n变了');
					},
				},
				// 创建之前 无法通过vm访问到data中的数据、methods中的方法
				beforeCreate(){
					console.log('beforeCreate');
					// console.info(this);
					// debugger;
				},
				// 创建完毕 可通过vm访问到data中的数据、methods中配置的方法
				created(){
					console.log('created');
					// console.log(this);
					// debugger;
				},
				// 挂载之前 页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效
				beforeMount(){
					console.log('beforeMount');
					// console.log(this);
					// debugger;
				},
				// 挂载完毕
				mounted(){
					console.log('mounted',this.$el);
					// console.log(this);
				},
				// 更新之前 此时数据是新的，但页面是旧的，页面和数据尚未保持同步
				beforeUpdate(){
					console.log('beforeUpdate');
					// console.log(this.n);
					// debugger;
				},
				// 更新完毕 此时数据是新的，页面也是新的，页面和数据保持同步
				updated(){
					console.log('updated');
					// console.log(this.n);
				},
				// 销毁之前
				beforeDestroy(){
					console.log('beforeDestroy');
				},
				// 销毁完毕
				destroyed(){
					console.log('destroyed');
				}
			})
		</script>
	</body>
</html>
